<template>
	<view class="container">
		<view class="jishi">
			<image class="jishi-image" src="../../static/image/闹钟.png" mode=""></image>
			<view>倒计时：</view>
			<uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
		</view>
		<!-- 题目 -->
		<view class="question-title">
			<view class="title-item">
				<text class="label">题目</text>
				<text class="label-item">{{ currentQuestionIndex + 1 }}/{{ questions.length }}</text>
			</view>
			<view class="single-choice-button">单选题</view>
		</view>

		<!-- 题目内容 -->
		<view class="question-content">
			{{ question }}
		</view>

		<!-- 选项 -->
		<view class="options">
			<view v-for="(option, index) in options" :key="index" @click="selectOption(index)"
				:class="['option', { selected: selectedIndex === index }]">
				<text>{{ option.label }}</text>
				<text>{{ option.text }}</text>
			</view>
		</view>
		<!-- 导航按钮 - 动态显示 -->
		<view class="confirm-button">
			<!-- 第一题只显示确认按钮 -->
			<button class="item-01" v-if="currentQuestionIndex === 0" @click="confirmSelection">确认</button>
			<!-- 最后一题显示上一题和提交按钮 -->
			<template v-else-if="currentQuestionIndex === questions.length - 1">
				<view class="button-01">
					<view class="item-item" @click="goToPreviousQuestion">上一题</view>
					<view class="item-item" @click="submitExam">提交试卷</view>
				</view>
			</template>

			<!-- 中间题显示上一题和下一题 -->
			<template v-else>
				<view class="buttom-02">
					<button @click="goToPreviousQuestion" class="item-item">上一题</button>
					<button @click="goToNextQuestion" class="item-item">下一题</button>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 生成10道题目
			const generateQuestions = () => {
				const questions = [];
				for (let i = 1; i <= 10; i++) {
					questions.push({
						id: i,
						text: `${i}、这是第${i}道题目...`,
						options: [{
								label: 'A.',
								text: `选项A${i}`
							},
							{
								label: 'B.',
								text: `选项B${i}`
							},
							{
								label: 'C.',
								text: `选项C${i}`
							},
							{
								label: 'D.',
								text: `选项D${i}`
							}
						],
						userAnswer: null
					});
				}
				return questions;
			};
			return {
				questions: generateQuestions(),
				currentQuestionIndex: 0,
				selectedIndex: null,
				question: '',
				options: [],
				testHour: 1,
				testMinute: 0,
				testSecond: 0
			};
		},
		created() {
			this.loadCurrentQuestion();
		},

		methods: {
			selectOption(index) {
				this.selectedIndex = index; //更新选中的选项
			},
			confirmSelection() {
				// 如果是第一题的确认，自动跳转到第二题
				if (this.currentQuestionIndex === 0) {
					this.currentQuestionIndex = 1;
					this.loadCurrentQuestion();
				} else {
					// 其他题目直接调用goToNextQuestion
					this.goToNextQuestion();
				}
				// 保存用户答案
				this.questions[this.currentQuestionIndex].userAnswer = this.selectedIndex;

				// 如果题目已完成，显示提示
				if (this.currentQuestionIndex === this.questions.length - 1) {
					uni.showToast({
						title: "所有题目已完成！",
						icon: "success"
					});
					return;
				}
			},
			loadCurrentQuestion() {
				const currentQuestion = this.questions[this.currentQuestionIndex];
				this.question = currentQuestion.text;
				this.options = currentQuestion.options;
				this.selectedIndex = currentQuestion.userAnswer;
			},
			goToPreviousQuestion() {
				if (this.currentQuestionIndex > 0) {
					this.currentQuestionIndex--;
					this.loadCurrentQuestion();
				}
			},
			goToNextQuestion() {
				if (this.currentQuestionIndex < this.questions.length - 1) {
					this.currentQuestionIndex++;
					this.loadCurrentQuestion();
				} else {
					uni.showToast({
						title: "已经是最后一题了！",
						icon: "none"
					});
				}
			},
			submitExam() {
				// 处理提交试卷逻辑
				uni.showToast({
					title: "试卷已提交！",
					icon: "success"
				});
			}
		}

	};
</script>

<style>
	.container {
		padding: 20px;
		background-color: #fff;
		height: 813px;
	}

	.progress-bar {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.progress-bar-fill {
		width: 50%;
		height: 20px;
	}

	.jishi {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.jishi-image {
		width: 25px;
		height: 25px;
	}

	.title-item {
		display: flex;
		justify-content: space-between;
	}

	.label {
		font-size: 16px;
		color: #333;
		white-space: nowrap;
	}

	.question-title {
		display: flex;
		margin-bottom: 20px;
	}

	.question-title text {
		font-size: 18px;
		font-weight: bold;
	}

	.single-choice-button {
		background: linear-gradient(to left, #007aff, lightskyblue);
		color: #fff;
		padding: 3px 10px;
		border-radius: 5px;
	}

	.question-content {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.options {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.option {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		cursor: pointer;
	}

	.option.selected {
		background-color: lightskyblue;
	}

	.confirm-button {
		margin-top: 20px;
		position: fixed;
		bottom: 0;
		width: 90%;
	}

	.item-01 {
		padding: 10px;
		background: linear-gradient(to left, #007aff, lightskyblue);
		color: #fff;
		border: none;
		border-radius: 50px;
	}
	.button-01{
		display: flex;
	}
	.buttom-02{
		display: flex;
	}
	.item-item {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 5px;
		height: 50px;
		width: 50%;
		border: none;
		color: #fff;
		font-size: 18px;
		border-radius: 20px;
		background: linear-gradient(to left, #007aff, lightskyblue);
	}

	button[disabled] {
		opacity: 0.5;
	}
</style>